document.querySelector(".splitter").addEventListener("mousedown", function (e) {
  e.preventDefault();
  const container = this.parentElement;
  const leftPane = container.querySelector(".left-pane");
  const rightPane = container.querySelector(".right-pane");

  let startX = e.clientX;
  let startLeftWidth =
    parseInt(leftPane.style.width, 10) || leftPane.offsetWidth;

  function onMouseMove(e) {
    const moveX = e.clientX - startX;
    const newLeftWidth = Math.max(200, startLeftWidth + moveX); // 保持最小宽度
    leftPane.style.width = `${newLeftWidth}px`;
    rightPane.style.width = `calc(100% - ${newLeftWidth}px - 5px)`; // 减去隔条宽度

    // 确保分隔条跟随鼠标
    const containerRect = container.getBoundingClientRect();
    const newX = e.clientX - containerRect.left;
    this.style.transform = `translateX(${newX - this.offsetWidth / 2}px)`;
  }

  function onMouseUp() {
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  }

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
});
